@var head = {
	<link href="${request.contextPath}/lib/ztree/zTreeStyle.css" rel="stylesheet" type="text/css" />
	<title>人员管理-添加权限</title>
	<style>
		ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:600px;height:200px;overflow-y:scroll;overflow-x:auto;}
	</style>
@};
@var content = {
	<div class="pd-20">
		<form action="${request.contextPath}/action/create.html" method="post" class="form form-horizontal" id="createForm">
			<div class="row cl">
				<label class="form-label col-3"><span class="c-red">*</span>权限名：</label>
				<div class="formControls col-5">
					<input type="text" class="input-text" value="" placeholder="输入权限名" id="actionName" name="actionName" datatype="*2-16" nullmsg="权限名不能为空">
				</div>
				<div class="col-4"> </div>
			</div>
			<div class="row cl">
				<label class="form-label col-3">是否启用：</label>
				<div class="formControls col-5"> <span class="select-box" style="width:150px;">
					<select class="select" name="actionEnable" size="1">
						<option value="0">不可用</option>
						<option value="1" selected>可用</option>
					</select>
					</span> 
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-3">备注：</label>
				<div class="formControls col-5">
					<input type="text" class="input-text" value="" placeholder="输入备注" id="remark" name="remark" datatype="*0-100">
				</div>
				<div class="col-4"> </div>
			</div>
			<div class="row cl">
				<label class="form-label col-3"><span class="c-red">*</span>所属父级：</label>
				<div class="formControls col-5">
					<input type="text" class="input-text" style="width:85%" value="" placeholder="选择父级权限" id="parentName" name="parentName" datatype="*" nullmsg="权限名不能为空">
					<a id="menuBtn" href="#" onclick="showMenu(); return false;">选择</a>
				</div>
				<div class="col-4"> </div>
			</div>
			<div class="row cl">
				<div class="col-9 col-offset-3">
					<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
				</div>
			</div>
			<input type="hidden" id="parentId" name="parentId">
		</form>
	</div>
	<div id="menuContent" class="menuContent" style="display:none; position: absolute;">
		<ul id="actionTree" class="ztree" style="margin-top:0; width:160px;"></ul>
	</div>
@};
@var js = {
	<script type="text/javascript" src="${request.contextPath}/lib/ztree/jquery.ztree.all-3.5.min.js"></script> 
	<script type="text/javascript" src="${request.contextPath}/lib/Validform/5.3.2/Validform.min.js"></script> 
	<script type="text/javascript" src="${request.contextPath}/js/jquery.form.js"></script>
	<script>
		var zNodes = [
            {id : '0', pId : 0, name : '权限管理', isParent : true, open : true}
        ];
  		var treeSetting = {
  			view : {
  				dblClickExpand : false
  			},
  			async : {
  				enable : true,
  				url : "${request.contextPath}/action/childs.html?t=" + Math.random(),
  				autoParam : ["id=id"],
  				dataFilter: ajaxDataFilter
  			},
  			callback : {
  				onClick : actionTreeClick
  			}
  		};
		$(document).ready(function () {
			validSubmitFormAndRefreshParent('createForm');
			var actionTree = $.fn.zTree.init($("#actionTree"), treeSetting, zNodes);
			expandFirstNode(actionTree);
		});
		function expandFirstNode(actionTree){
			var nodes = actionTree.getNodes();  
			actionTree.expandNode(nodes[0], true);
		}
		function actionTreeClick(event, treeId, treeNode) {
			$("#parentName").val(treeNode.name);
			$("#parentId").val(treeNode.id);
		}
		function ajaxDataFilter(treeId, parentNode, responseData) {
		    return responseData.data;
		}
		function showMenu() {
			var cityObj = $("#parentName");
			var cityOffset = $("#parentName").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}
	</script>
@};
@include("/layout/layout.html",{head:head,content:content,js:js}){}